<template>
	<div class="my_l">
		<MyWalletHeaderView></MyWalletHeaderView>
		<div class="my_wallet_header text_align_ct">
			<p class="colorfff line_height2 margin_top10 font_size16">账户余额（元）</p>
			<strong class="colorfff font_size28 line_height2">{{uInfs.Balance}}</strong>
			<p class="colorfff">结算中金额：0.00</p>
		</div>
		<div class="border_bot_dcdcdc overflow_hidden pad10 background_fff">
			<div @click="selectTab(0)" class="fl">
				<img class="vertical_align_mid" src="../assets/images/yuemingxi_icon.png" />
				<span>余额明细</span>
			</div>
			<div @click="selectTab(1)" class="fr">
				<img class="vertical_align_mid" src="../assets/images/jianglimingxi_icon.png" />
				<span>奖励明细</span>
			</div>
		</div>

		<mt-tab-container v-model="tabContainerActive">
			<mt-tab-container-item id="tab-container0">
				<div class="background_fff" style="padding: 10px; padding-bottom: 100px;">
					<h4>余额明细</h4>
					<div v-for="item in MemberAccountsList" class="border_bot_dcdcdc overflow_hidden padding_top10_bot10">
						<div class="fl width70">
							<p class="" style="line-height: 25px;">{{item.Remark}}</p>
							<p style="line-height: 25px;">{{item.CreateDate}}</p>
						</div>
						<div class="float_right width30 text_align_rg" style="line-height: 50px;">
							{{item.Change}}
						</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="tab-container1">
				<div class="background_fff" style="padding: 10px; padding-bottom: 100px;">
					<h4>奖励明细</h4>
					<!--<div v-for="item in MemberAccountsList" class="border_bot_dcdcdc overflow_hidden padding_top10_bot10">
						<div class="fl width70">
							<p class="" style="line-height: 25px;">{{item.Remark}}</p>
							<p style="line-height: 25px;">{{item.CreateDate}}</p>
						</div>
						<div class="float_right width30 text_align_rg" style="line-height: 50px;">
							{{item.Change}}
						</div>
					</div>-->
				</div>
			</mt-tab-container-item>
		</mt-tab-container>

	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	import MyWalletHeaderView from './MyWalletHeader.vue';
	export default {
		components: {
			MyWalletHeaderView,
		},
		data() {
			return {
				uInfs: {},
				MemberAccountsList: [],
				tabContainerActive: 'tab-container0'
			}
		},
		mounted() {
			let _this = this
			_this.GetPersonalInfo()
			_this.GetAccountLog()
		},
		methods: {
			GetPersonalInfo() {
				let _this = this;
				_this.$http.get('/client/Members', null, localStorage.Authorization, res => {
					if(res.code === 200) {
						console.log('我的账户res', res)
						_this.uInfs = res.data.list[0];
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			GetAccountLog() {
				let _this = this;
				_this.$http.get('/client/MemberAccounts', null, localStorage.Authorization, res => {
					if(res.code === 200) {
						console.log('我的账户记录res', res)
						_this.MemberAccountsList = res.data.list
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			selectTab(num) {
				let _this = this
				_this.tabContainerActive = 'tab-container' + num;
			}

		}
	}
</script>
<style>
	.mine_h {
		height: 45px;
	}
	
	.background_333 {
		background: #333333;
	}
	
	.my_wallet_header {
		padding: 15px 10px;
	}
	
	.my_wallet_ul {
		display: flex;
		justify-content: space-between;
	}
	
	.my_wallet_ul li {
		width: 25%;
		color: #fff;
		text-align: center;
	}
	
	.my_wallet_ul li p {
		line-height: 1.5em;
		font-size: 16px;
	}
	
	.my_wallet_ul li span {
		color: #ccc;
	}
	
	.width70 {
		width: 70%;
	}
	
	.width30 {
		width: 30%;
	}
	
	.my_wallet_header {
		padding: 15px 10px;
		background: url(../assets/images/accoutbg.png) no-repeat center center;
		background-size: 100% 100%;
		height: 200px;
	}
</style>